﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- InstanceBegin template="/Templates/ezdesk_app_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="pageTitle" -->
    <title>易得桌面</title>
    <!-- InstanceEndEditable -->
    <link href="Content/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
    <link href="Content/ui.textbox.css" type="text/css" rel="stylesheet" media="all" />
    <link href="Content/freecontent.css" rel="stylesheet" type="text/css" />
    <link href="Content/wdatepicker.css" rel="stylesheet" type="text/css" />
    <link href="Content/ajaxbusy.css" rel="stylesheet" type="text/css" />
    <link href="Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/ezdesk_mockdata.js" type="text/javascript"></script>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.form.js" type="text/javascript"></script>
    <script src="Scripts/ui.textbox.js" type="text/javascript"></script>
    <script src="Scripts/pinyin.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk-jquery-ui.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk_common.js" type="text/javascript"></script>
</head>
<!-- InstanceBeginEditable name="pageStyles" -->
<style type="text/css">
    .entryExplanation
    {
        font-weight: bolder;
        font-size: 14px;
        background-color: #FFEC8B;
    }
</style>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="pageScripts" -->
<script type="text/javascript">
    //************* URL常量
    var URL_UPDATE_STAFFINFO = "/Staff/UpdateStaffsInfo";
    //************* 全局变量
    var g_Var = {
        "dataStorage": null
    };

    //************* 常量定义
    var StaticResource = {
};
//************* Accessor访问器


var EzAccessor = {};
function CreateAccessor() {
    if (ezmock.IS_MOCKED) {
        EzAccessor = CreateMockEzAccessor();

    } else {
        EzAccessor = CreateRealEzAccessor();
    }
}





function CreateMockEzAccessor() {
    var mock_currentUser = {
        "Id": "0c9d7c0c-04a5-4ae2-97a1-d7bbc38f5c66",
        "Name": "杨裕欣", "UserName": "yuxin",
        "Dept": {
            "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
            "DeptName": "软件工程部",
            "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
        }
    };

    var mock_staffInfos = {
        "QqNumber": null,
        "MobileNo": "18801963408",
        "MainEmail": "meteor1211@gmail.com"
    };

    //模拟实现服务器交互方法
    var mockEzAccessor = {
        "getCurrentUser": function () {
            return mock_currentUser;
        },
        "getStaffInfos": function () {
            return mock_staffInfos;
        },
        "doUpdateStaffInfo": function (qqNumber, mobileNo, mainEmail) {
            alert(qqNumber);
            alert(mobileNo);
            alert(mainEmail);
        }

    };
    return mockEzAccessor;
}


function CreateRealEzAccessor() {
    //实现服务器交互方法
    var realEzAccessor = {
        "getCurrentUser": function () {
            //            return <%= ViewData["CurrentUser"] %>;
        },
        "getStaffInfos": function () {
            //            return <%= ViewData["StaffInfos"] %>;
        },
        "doUpdateStaffInfo": function (qqNumber, mobileNo, mainEmail) {
            $(document).ajaxBusy('begin');
            $.post(
                        URL_UPDATE_STAFFINFO,
                        {
                            'qqNumber': qqNumber,
                            'mobileNo': mobileNo,
                            'mainEmail': mainEmail
                        },
                        function (e) {
                            $(document).ajaxBusy('end');
                            $.displayStateInfo(e);

                        }
                );
        }
    };

    return realEzAccessor;
}




//存储考勤数据
function getStoreData() {
    var dataStorage = [];

    var qqNumber = $('#liQqNumber .alink').html();
    var moblieNo = $('#liMobileNo .alink').html();
    var mainEmail = $('#liEmail .alink').html();


    dataStorage.push(qqNumber, moblieNo, mainEmail);

    return dataStorage;
}



function recoverData() {
    var qqNumber = g_Var.dataStorage[0];
    var moblieNo = g_Var.dataStorage[1];
    var mainEmail = g_Var.dataStorage[2];

    $('#liQqNumber .alink').html(qqNumber);
    $('#liMobileNo .alink').html(moblieNo);
    $('#liEmail .alink').html(mainEmail);



}

function isDataChanged(currentData) {
    var isChanged = false;
    //判断是否有内容被修改 
    for (var key in g_Var["dataStorage"]) {

        if (currentData[key] != g_Var["dataStorage"][key]) {
            isChanged = true;
        }
    }

    return isChanged;
}


function controlModifyButton() {
    //是否被修改了
    var currentData = getStoreData();
    var isChanged = isDataChanged(currentData);
    //是否正在编辑
    var isEditing = false;

    if ($('.fieldslist').find('.btnSubmit:visible').length > 0) {
        isEditing = true;
    }
    //如果有修改 提交修改
    if (isChanged && !isEditing) {
        $('#divSubmit').show();
    }
    else {
        $('#divSubmit').hide();
    }

}


function domFunction(dom) {

    var root = $(dom);
    var alinkDom = $('.alink', root);
    var editDom = $('.cmbEdit', root);
    var textDom = $('.text', editDom);
    var submitDom = $('.btnSubmit', editDom);
    var cancelDom = $('.btnCancel', editDom);

    alinkDom.hover(function () {
        $(dom).find('.remind').show();

    });

    alinkDom.mouseleave(function () {
        $(dom).find('.remind').hide();

    });

    alinkDom.click(function () {
        $(dom).find('.divValue').hide();
        editDom.show();


        // 给formBox加个边框
        $('#extraInfo').css({
            'border': '1px solid red'
        });

        var alinkText = $(alinkDom).html();
        if (alinkText == "无") {
            alinkText = "";
        }
        textDom.val(alinkText)
                   .focus()
                   .select();

        //判断是否有修改控制button的显示
        controlModifyButton();

    });

    cancelDom.click(function () {
        $(dom).find('.divValue').show();
        editDom.hide();
        textDom.clearFields();

        //判断是否有修改控制button的显示
        controlModifyButton();
    });


    submitDom.click(function () {
        $(dom).find('.divValue').show();
        editDom.hide();

        var editedText = textDom.val();

        if (editedText.length == 0) {
            editedText = "无";
        }
        $(dom).find('.alink').html(editedText);

        //判断是否有修改控制button的显示
        controlModifyButton();

    });

}

function bindSimpleInfo(currentUser) {
    $('#lblUserName').html(currentUser.Name);
    $('#lblDeptName').html(currentUser.Dept.DeptName);
};



function setStaffInfosBack(staffInfoStr) {
    if (staffInfoStr == "无") {
        staffInfoStr = undefined;
    }

    return staffInfoStr
};



function setStaffInfos(staffInfoStr) {
    if (!staffInfoStr) {
        staffInfoStr = "无";
    }

    return staffInfoStr;
}


function bindStaffInfos(staffInfos) {
    $('#liQqNumber .alink').html(setStaffInfos(staffInfos.QqNumber));
    $('#liMobileNo .alink').html(setStaffInfos(staffInfos.MobileNo));
    $('#liEmail .alink').html(setStaffInfos(staffInfos.MainEmail));
};

function initPage() {
    EzTipsManager.addTipBox('#tip_remind', 'tipRemind');
    EzTipsManager.showTipBox('tipRemind');

    CreateAccessor();
    
    bindSimpleInfo(EzAccessor.getCurrentUser());
    bindStaffInfos(EzAccessor.getStaffInfos());

    $('#formHeadIconUpload').ajaxForm();

    //存储原始数据
    g_Var["dataStorage"] = getStoreData();

    domFunction("#liQqNumber");
    domFunction("#liMobileNo");
    domFunction("#liEmail");
}



function initPageEvent() {

    $('#btnCancel').click(function () {
        $('.text').clearFields();
        $('.alink').show();
        $('.cmbEdit').hide();
        //恢复原始数据
        recoverData();

        $('#divSubmit').hide();

        // 给formBox去掉边框
        $('#extraInfo').css({
            'border': 'none'
        });

        $('.pnlModifySubmit').hide();

    });


    $('#btnSubmit').click(function () {
        var qqNumber = $('#liQqNumber .alink').html();
        var mobileNumber = $('#liMobileNo .alink').html();
        var mainEmail = $('#liEmail .alink').html();

        EzAccessor.doUpdateStaffInfo(setStaffInfosBack(qqNumber),
                                     setStaffInfosBack(mobileNumber),
                                     setStaffInfosBack(mainEmail));

        $('#divSubmit').hide();
    });

    $('#btnUploadHeadIcon').click(function () {
        $('#pop_uploadHeadIcon').contentsManager();
    });

    $('#btnDoUpload').click(function () {
        alert("uploading....");

        $('#formHeadIconUpload').ajaxSubmit({ iframe: true });
    });


}
$(function () {
    initPage();
    initPageEvent();
});
</script>
<!-- InstanceEndEditable -->
<body>
    <div id="root">
        <div id="headw">
            <div id="head">
                <!-- InstanceBeginEditable name="pageHead" -->
                <p>
                    早上好，杨裕欣(软件工程部)
                </p>
                <div id="status-bar">
                    <span><a href="#">设置</a></span>&nbsp; 魏玛软件出品
                </div>
                <!-- InstanceEndEditable -->
            </div>
        </div>
        <div id="main">
            <div id="contentw">
                <div id="content-page">
                    <!-- InstanceBeginEditable name="pageContent" -->
                    <div id="page-head">
                        <img src="Content/icons/myContact.png" style="width: 48px; height: 48px;" alt="myContact" />
                        <span>个人信息</span>
                    </div>
                    <div id="page-body">
                        <div style="margin-top: 10px;">
                            <div>
                                <span class="entryExplanation">基本信息</span> <span>姓名，部门等基本信息暂时是不可以修改的哦！ </span>
                            </div>
                            <div style="padding: 5px; margin: 5px; border: 1px solid #A9A9A9; min-height: 80px;
                                width: 460px;">
                                <div style="padding: 5px; margin: 5px; border: 1px solid #A9A9A9; height: 100px;
                                    width: 100px;">
                                    <img id="personalGravatar" height="100" width="100" src="/core/headicon"></img>
                                </div>
                                <div style="margin: 5px;">
                                    <a id="btnUploadHeadIcon">上传头像</a></div>
                                <ul class="fieldslist">
                                    <li>
                                        <div class="l">
                                            <label>
                                                姓名：
                                            </label>
                                        </div>
                                        <div class="r">
                                            <label id="lblUserName">
                                            </label>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="l">
                                            <label>
                                                部门：
                                            </label>
                                        </div>
                                        <div class="r">
                                            <label id="lblDeptName">
                                            </label>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <div>
                                <span class="entryExplanation">扩展信息</span> <span>如果您更换了手机号码，qq，邮箱等联系方式，请及时更新。</span>
                            </div>
                            <div id="extraInfo" style="padding: 5px; border: 1px solid #A9A9A9; margin: 5px;
                                width: 460px;">
                                <ul class="fieldslist">
                                    <li id="liQqNumber">
                                        <div class="l">
                                            <label>
                                                QQ：
                                            </label>
                                        </div>
                                        <div class="r">
                                            <div class="divValue">
                                                <a class="alink"></a>&nbsp;<span class="remind" style="font-size: 14px; color: Gray;
                                                    display: none;">点击修改</span>
                                            </div>
                                            <div class="cmbEdit" style="display: none;">
                                                <input class="text" style="width: 150px;" />
                                                <div style="display: inline; margin-left: 10px; font-size: 14px;">
                                                    <a class="btnSubmit">确定</a> 或者 <a class="btnCancel">&nbsp;取消&nbsp;</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="liMobileNo">
                                        <div class="l">
                                            <label>
                                                手机：
                                            </label>
                                        </div>
                                        <div class="r">
                                            <div class="divValue">
                                                <a class="alink"></a>&nbsp;<span class="remind" style="font-size: 14px; color: Gray;
                                                    display: none;">点击修改</span>
                                            </div>
                                            <div class="cmbEdit" style="display: none;">
                                                <input class="text" style="width: 150px;" />
                                                <div style="display: inline; margin-left: 10px; font-size: 14px;">
                                                    <a class="btnSubmit">确定</a> 或者 <a class="btnCancel">&nbsp;取消&nbsp;</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li id="liEmail">
                                        <div class="l">
                                            <label>
                                                邮箱：
                                            </label>
                                        </div>
                                        <div class="r">
                                            <div class="divValue">
                                                <a class="alink"></a>&nbsp;<span class="remind" style="font-size: 14px; color: Gray;
                                                    display: none;">点击修改</span>
                                            </div>
                                            <div class="cmbEdit" style="display: none;">
                                                <input class="text" style="width: 150px;" />
                                                <div style="display: inline; margin-left: 10px; font-size: 14px;">
                                                    <a class="btnSubmit">确定</a> 或者 <a class="btnCancel">&nbsp;取消&nbsp;</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <div id="divSubmit" style="display: none; margin: 5px;">
                                    <input type="button" id="btnSubmit" value="确定修改" />
                                    或者 <a id="btnCancel">&nbsp;取消&nbsp;</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="page-submit" style="display: none;">
                    </div>
                    <!-- InstanceEndEditable -->
                </div>
                <div id="content-foot">
                    <small>这个是内容下面的脚注</small></div>
            </div>
            <div id="tipsw">
                <!-- InstanceBeginEditable name="pageShortcut" -->
                <!-- InstanceEndEditable -->
                <div id="tips" class="box">
                </div>
            </div>
            <div class="clearfloat">
            </div>
        </div>
    </div>
    <!-- InstanceBeginEditable name="pageFoot" -->
    <div id="tip_remind" style="display: none; min-height: 130px;">
        <h1>
            小贴士</h1>
        <p class="indent">
            这里您可以看到自己的基本信息和扩展信息，同时可以修改自己的联系方式。方便大家联系！
        </p>
    </div>

    <div id="pop_uploadHeadIcon" style="display: none;">
        <div>
            <div><img id="imgTempHeadIcon" alt="我的头像" src="/core/headIcon" class="imgBigHeadIcon" /></div>
            <form id="formHeadIconUpload" action="/staff/doImageUpload" enctype="multipart/form-data" method="post">
                <div>选择新的头像：<input type="file" id="fileUpload" name="imgHeadIcon" /></div>
                <input type="submit" value="确定上传" />
            </form>
        </div>
    </div>
    <!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd -->
</html>
